<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.nickName" placeholder="用户昵称" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.content" placeholder="评论内容" style="width: 170px;margin-left:5px;"></el-input>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="15%" align="center" label="用户">
        <template slot-scope="scope">
          <div style="display:flex; justify-content:center;align-items:center;">
            <span style="width:50px"><bx-image :src="scope.row.portraitConvert"  :width="50" :height="50"></bx-image> </span>
            <span style="margin-left:5px;">{{scope.row.nickName}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column min-width="25%" align="center" label="评价内容">
        <template slot-scope="scope">
          <span>{{ scope.row.comment }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="评价分">
        <template slot-scope="scope">
          <span class="rate-ex">
          <el-rate
            v-model="scope.row.scoreConvert"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="scope.row.scoreConvert.toFixed(1)">
          </el-rate>
          </span>
        </template>
      </el-table-column>

      <el-table-column min-width="15%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="15%">
        <template slot-scope="scope">
          <router-link :to="'/shopmanage/commentdetails/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              编辑
            </el-button>
          </router-link>
          <el-popconfirm title="确定要删除这条记录吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="handleDelete(scope.row.id)" >
            <el-button slot="reference" type="danger" size="small" icon="el-icon-delete" style="margin-left:5px;" >
                删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as shopApi from '@/api/shop'
import * as uploadApi from '@/api/upload'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'

export default {
  name: 'CourseCommentShop',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        nickName:'',
        content:''
      },
      search:{
        nickName:'',
        content:''
      },
      courseListOrigin:[],
      courseList:null,
    }
  },
  created(){
      var that=this;
      that.getCourseList();
  },
  mounted(){

  },
  methods: {
    getCourseList(){
        var that=this;
        courseApi.getCourseList({page:1,rows:50}).then(res=>{
            if(res.data){
                that.courseListOrigin=res.data.items.map(item=>{return item;});
                that.courseList=that.courseListOrigin.map(item=>{
                    return {label:item.name,value:item.id};
                });
                if(that.courseList.length>0){
                  that.search.keCourseId=that.courseList[0].value;
                }
                that.getList();
            }
        })
    },
    getList(){
      var that=this;
      that.listLoading = true;
      
      courseApi.getCourseCommentList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.portraitConvert=item.headPortrait;
              item.scoreConvert=parseFloat((item.score/10).toFixed(1));
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total;
         }
      }).catch(()=>{that.listLoading=false;})
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.nickName=that.search.nickName;
      that.listQuery.content=that.search.content;
      that.getList();
    },
    handleDelete(id){
        var that=this;
        courseApi.deleteComment({id:id}).then(res=>{
          if(res.data){
            that.$message({
              message:'删除成功！',
              type:'success'
            });
            setTimeout(()=>{
              var idx=that.list.findIndex(u=>u.id==id);
              if(idx>-1){
                that.list.splice(idx,1);
              }
            },500);
          }
        })
    }
  }
}
</script>
<style scoped>
.rate-ex>>>.el-rate__icon{
      margin-right: 2px !important;
    }
</style>